<template>
  <div class="container">
    <div class="index-head">人事系统</div>
    <div class="pm-part">
      <div class="line_title">待办事项</div>
      <ul>
        <li>
          <router-link to="/todoList/todo">
            <img src="./image/waitcon.png">
            <h6>待办事项</h6>
          </router-link>
          <i v-show="waitnum">{{waitnum}}</i>
        </li>
        <li>
          <router-link to="/todoList/done">
            <img src="./image/alreadycon.png">
            <h6>已办事项</h6>
          </router-link>
        </li>
        <li>
          <router-link to="/myApplication">
            <img src="./image/myaplt.png">
            <h6>我的申请</h6>
          </router-link>

        </li>
      </ul>
    </div>
    <div class="pm-part">
      <div class="line_title">人事信息</div>
      <ul>
        <li>
          <router-link to="/detail">
            <img src="./image/wdxx.png">
            <h6>我的信息</h6>
          </router-link>
        </li>
        <li v-if="flag=='Y'" @click="mySubordinates">
            <img src="./image/wdxs.png">
            <h6>我的下属</h6>
        </li>
        <!-- <li>
          <router-link to="/formal">
            <img src="./image/zzsq.png">
            <h6>转正申请</h6>
          </router-link>
        </li>
        <li>
          <router-link to="/dimission">
            <img src="./image/lzsq.png">
            <h6>离职申请</h6>
          </router-link>
        </li> -->        <li @click="toPayroll">
          <img src="./image/salary.png">
          <h6>工资单</h6>
        </li>
      </ul>
    </div>
    <div class="pm-part">
      <div class="line_title">考勤管理</div>
      <ul>
        <!-- <li @click="toAttendanceCalendar">
           <router-link to="/attendanceCalendar"> 
              <img src="./image/kqrl.png">
              <h6>考勤日历</h6>
            </router-link> 
        </li> -->
        <li @click="vacation">
          <img src="./image/xjsq.png">
          <h6>休假申请</h6>
        </li>
        <li >
          <!-- v-if="flag3=='Y'" -->
          <router-link to="/goOut">
            <img src="./image/wcsq.png">
            <h6>外出申请</h6>
          </router-link>
        </li>
        <li>
           <!-- v-if="flag1=='Y'" -->
          <router-link to="/overTime">
            <img src="./image/jbsq.png">
            <h6>加班申请</h6>
          </router-link>
        </li>
        <!-- <li @click="toSupplementary">
            <img src="./image/bksq.png">
            <h6>补卡申请</h6>
        </li> -->
        <li>
          <router-link to="/unvacation">
            <img src="./image/xiaojsq.png">
            <h6>销假申请</h6>
          </router-link>
        </li>
      </ul>
    </div>
    <!-- <div class="pm-part">
      <div class="line_title">绩效管理</div>
      <ul>
        <li @click="toPerformanceResult">
          <img src="./image/jxck.png">
          <h6>绩效结果</h6>
        </li>
        <li @click="toEvaluationResult">
          <img src="./image/cpck.png">
          <h6>培训结果</h6>
        </li>
      </ul>
    </div> -->
  </div>
</template>
<script>
import { getTdListNum, getEplid } from "../../api/api";
import CommonUtil from '../../components/basic/util'
export default {
  data() {
    return {
      waitnum: "",
      flag: "",
      flag1: "",
      flag3: ""
    };
  },
  mounted() {
    
    CommonUtil.tryLogin(this).then(()=>{
      this.getempid();
    });
  },
  methods: {
    mySubordinates() {
      this.$router.push({
        name: "Subordinates",
        query: {
          emplid: this.$store.state.eid
        }
      });
    },
    toPayroll() {
      this.$router.push({
        name: "Payroll"
      });
    },
    vacation() {
        return this.$router.push({
          name: "Vacation",
          query: {
            emplid: this.$store.state.eid
          }
        });
    },
    toAttendanceCalendar() {
      
      this.toastInfo("功能未开放")
      return;
      this.$router.push({
        name: "AttendanceCalendar",
        query: {
          emplid: this.$store.state.eid
        }
      });
    },
    toPerformanceResult() {
      this.toastInfo("功能未开放")
      return;
      this.$router.push({
        name: "PerformanceResult",
        query: {
          emplid: this.$store.state.eid
        }
      });
    },
    toSupplementary(){
      this.toastInfo("功能未开放")
      return;
      this.$router.push({
        path: "/supplementaryCard"
      });
    },
    toEvaluationResult() {
      this.toastInfo("功能未开放")
      return;
      this.$router.push({
        name: "EvaluationResult",
        query: {
          emplid: this.$store.state.eid
        }
      });
    },
    toastInfo(txt) {
      this.$vux.toast.show({
        text: txt
      })
    },
    getempid() {
      getEplid({
        "decstring":CommonUtil.getWechatToken()
      }).then(res => {
        if (res && res.retCode === "000000") {
          this.$store.state.eid = res.retData.emplId;
          this.$store.state.oprId = res.retData.oprId;
          this.flag = res.retData.flag; // 我的下属权限
          this.flag1 = res.retData.flag1; // 加班申请权限
          this.$store.state.flag2 = res.retData.flag2; // 下属薪酬信息
          this.flag3 = res.retData.flag3; // 外出申请权限

          this.getWatNum();
          // console.log(res.retData)
        }
      });
    },
    getWatNum() {
      getTdListNum()
        .then(res => {
          if (res && res.retCode === "000000") {
            this.waitnum = res.retData;
          } else {
            this.$vux.alert.show({
              title: "提示",
              content: res.retMsg
            });
          }
        })
        .catch(res => {
          this.$vux.alert.show({
            title: "警告",
            content: "网络异常，请稍后重试"
          });
        });
    }
  }
};
</script>
<style type="text/scss" lang="scss" scoped>
.container {
  .index-head {
    padding-left: 10px;
    text-align: left;
    line-height: 40px;
    font-size: 18px;
    font-weight: 600;
  }
  .pm-part {
    text-align: left;
    border-top: 6px solid #e5e5e5;
    .line_title{
      line-height: 26px;
      font-size: 14px;
      border-bottom: 1px solid #e5e5e5;
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      &::before {
        content: " ";
        margin: 8px 4px -2px 10px;
        display: inline-block;
        width: 4px;
        height: 14px;
        background: #1caafe;
      }
    }
    ul {
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      padding-bottom: 16px;
      li {
        display: inline-block;
        position: relative;
        text-align: center;
        width: 24%;
        font-size: 14px;
        h6{
          color: #000;
        }
        img {
          margin-top: 20px;
          margin-bottom: 10px;
        }
        i {
          position: absolute;
          display: block;
          width: 20px;
          height: 20px;
          top: 10px;
          right: 13px;
          background: #ff0000;
          border-radius: 50%;
          color: #fff;
          text-align: center;
          line-height: 20px;
        }
      }
    }
  }
}
</style>
